<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">hello</div>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <div class="box">
        盒子1
    </div>
    <div calss="box">
        盒子2
    </div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //1、Dom文档对象模型，是一个接口，通过dom可以实现一些效果
        //注意：学习接口的方法：（1）、这个接口是用来干什么的。（2）、接口有没有参数，对参数有没有要求。（3）、接口的返回值是什么。（4）、测验一下
        //2、文档：一个页面就是一个文档，dom中使用document来表示
        //3、元素：页面中所有标签都是元素,dom中用element来表示
        //4、节点：网页中的所有内容都是节点（标签、属性、文本、注释等），ｄｏｍ中使用ｎｏｄｅ来表示
        

        //5、获取页面的元素：
        //（1）、通过id来获取：getElementById("字符串")  返回的是一个对象
    //    var timer =  document.getElementById('time'); //获取到元素
    //    console.dir(timer);//直接打印输出元素中的内容

        //（2）、通过标签名来获取:getElementsByTagName()
        // var lis = document.getElementsByTagName("li");
        // // console.log(lis[0]);
        // //通过for循环打印出所有的Li
        // for(var i = 0; i< lis.length;i++){
        //     console.log(lis[i]);
        // }

        //通过某个元素（父元素）内部所有指定标签名的子元素：element.getElementsByTagName("标签名") 注意：父元素必须是单个对象（必须指明是哪一个元素对象） 获取的时候不包括父元素自己
        // var uls = document.getElementsByTagName("ul")
        // console.log(uls[0].getElementsByTagName("li"));


        //（3）、通过HTML5新增的方法来获取
        //通过类名来获取元素：getElementsByClassName("类名")
        // var boxs = document.getElementsByClassName("box");
        // console.log(boxs);

        //querySelector("选择器")：根据指定选择器返回第一个元素对象
        //querySelectorAll("选择器")  根据指定选择器返回所有元素对象

        //（4）、特殊元素获取
        //（1）、获取body元素：document.body
        // var bod = document.body;
        // console.log(bod);
        
        //（2）、获取html元素：document.documentElement
        var he = document.documentElement
        console.log(he);

    </script>
    
</body>
</html>